<template>
   <div class = "chat-item">
        <div class = "left-chat-item">  
          <el-image class="left-chat-item-face"
          :src="face"
          fit="fill" />
        </div>
        <div class = "center-chat-item">
            <div class = "center-chat-item-name">{{name}}</div>
            <div class = "center-chat-item-msg">{{message}}</div>
        </div>
        <div class = "right-chat-item">
          {{time}}
        </div>
    </div>
</template>

<script>

export default {
  name: "chatItem",
  props: {
    // route配置json
    name: {
      type: String,
      default: ""
    },
    message: {
      type: String,
      default: ""
    },
    face: {
      type: String,
      default: ""
    },
    time: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      onlyOneChild: null
    };
  },
  methods: {
   
  }
};
</script>
<style lang="scss" scoped>
 .left-chat-item-face{
    width: 60px;
    height: 60px;
    padding: 5px;
  
}
.chat-item{width:100%;display: flex; height: 70px;margin: 0px;padding: 5px}
.left-chat-item,.right-chat-item{
  height: 60px; 
}
.center-chat-item{ 
  flex:1; 
  height: 60px; 
  padding-left:11px;
  padding-top: 11px;
}
.left-chat-item{
  line-height: 60px;

}
.right-chat-item{
  height: 18px;
  font-size: 12px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #B0B0B0;
  line-height: 14px;
  -webkit-background-clip: text;
  padding-top: 10px;
 
}
.center-chat-item-name{
  height: 24px;
  font-size: 16px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #000000;
  line-height: 19px;
  -webkit-background-clip: text;
}
.center-chat-item-msg{
  height: 21px;
  font-size: 14px;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  font-weight: 400;
  color: #B0B0B0;
  line-height: 16px;
  -webkit-background-clip: text;
}
</style>